<template>
    <div class="feedBack">

        <div class="title">
            {{ $t('assemble.反馈内容意见') }}
        </div>

        <div>
            <input class="inputItem" v-model="content" type="text" :placeholder="$t('assemble.请输入')">
        </div>

        <div class="title">
            {{ $t('assemble.图片选填提供问题截图') }}
        </div>

        <div class="imgBox">
            <el-upload action="https://demo2.1p5.net/index.php/api/common/upload" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :headers="headers" :on-success="submit">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>

        <div class="title">
            {{ $t('assemble.联系人') }}
        </div>

        <div>
            <input class="inputItem" v-model="linkman" type="text" :placeholder="$t('assemble.请输入')">
        </div>

        <div class="title">
            {{ $t('assemble.联系方式') }}
        </div>

        <div>
            <input class="inputItem" v-model="contactway" type="number" :placeholder="$t('assemble.请输入')">
        </div>


        <div class="btns" @click="submitfeedBack">
            {{ $t('assemble.提交') }}
        </div>

    </div>
</template>
<script>
import { feedback } from "../../utils/api"
import { Toast, Notify } from 'vant';


export default {
    components: {

    },
    data() {
        return {
            lang: 'zh',
            content: '',//内容
            linkman: '',//联系人
            contactway: '', //联系方式
            dialogVisible: false,
            imgs: '',
            headers: {}

        }
    },
    created() {
        this.$i18n.locale = localStorage.getItem('langtype')
        this.lang = localStorage.getItem('langtype')
        let obj = {
            token: localStorage.getItem('token')
        }
        this.headers = obj

    },
    mounted() {
        // this.getyinsi()
    },
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file, fileList) {
            console.log(file, "file", fileList)
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;

        },
        submit(res, img, fileList) {
            this.imgs = this.imgs + res.data.url + ","
        },
        async submitfeedBack() {
            let data = {
                content: this.content,
                name: this.linkman,
                mobile: this.contactway,
                images: this.imgs
            }
            let res = await feedback(data)
            if (res.code == 1) {
                Toast(this.$t('assemble.反馈成功'));
                setTimeout(() => {
                    location.reload()
                }, 1500);
            } else {
                Toast(res.msg);
            }
        },

    },

}
</script>

<style scoped lang="scss">
@media screen and (max-width: 750px) {
    .feedBack {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;

        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #333333;
            line-height: 19px;
            text-align: justified;
            font-style: normal;
            text-transform: none;
            margin-top: 15px;
        }

        .inputItem {
            width: 345px;
            height: 45px;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #EDEDED;
            margin-top: 10px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            text-align: justified;
            font-style: normal;
            text-transform: none;
            text-indent: 10px;
        }

        .uploadimg {
            width: 80px;
            height: 80px;
            margin-top: 10px;
        }

        .imgBox {
            margin-top: 30px;
        }

        .btns {
            width: 320px;
            height: 44px;
            background: #E00000;
            border-radius: 100px 100px 100px 100px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 15px;
            color: #FFFFFF;
            line-height: 44px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            text-align: center;
            margin: 50px auto;
        }

    }
}

@media screen and (min-width: 751px) and (max-width: 1300px) {
    .feedBack {
        width: 100%;
        padding: 50px;
        padding-top: 100px;
        box-sizing: border-box;

        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24px;
            color: #333333;
            line-height: 19px;
            text-align: justified;
            font-style: normal;
            text-transform: none;
            margin-top: 50px;
        }

        .inputItem {
            width: 90%;
            height: 90px;
            border-radius: 10px 10px 10px 10px;
            border: 1.5px solid #EDEDED;
            margin-top: 20px;
            margin: 0 auto;
            margin-top: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 23px;
            line-height: 16px;
            text-align: justified;
            font-style: normal;
            text-transform: none;
            text-indent: 30px;
        }

        .uploadimg {
            width: 160px;
            height: 160px;
            margin-top: 20px;
        }

        .imgBox {
            margin-top: 30px;
        }

        .btns {
            width: 80%px;
            height: 90px;
            background: #E00000;
            border-radius: 100px 100px 100px 100px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 90px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            text-align: center;
            margin: 100px auto;
        }

    }
}
</style>